<template>
    <div class="box">
      <A>
        <template #left>
          <div class="MdCatalog1"><!--目录-->
        <MdCatalog
          :editorId="state.id"
          class="MdCatalog"
          :scrollElement="scrollElement" 
          :theme="state.theme"
          scrollElementOffsetTop:12
        />
      </div>
        </template>
  
        <template #right>
  
          <div class="Mdpreview"><!--内容-->
        <MdPreview
        :id="state.id" 
        :modelValue="state.text" 
        :theme="state.theme" 
        />
      </div>
        </template>
      </A>
      
   
    
    </div>
  </template>
  
  <script setup>
  import A from "./A.vue";
  import { ref, onMounted, reactive, watch } from "vue";
  import { MdEditor, MdPreview, MdCatalog } from "md-editor-v3";
  import { config } from "md-editor-v3";
  import "md-editor-v3/lib/style.css";
  import hljs from "highlight.js"; //代码高亮
  import "highlight.js/styles/atom-one-dark.css"; // 选择你喜欢的样式
  hljs.highlightAll();
  
  const state = reactive({
    text: localStorage.getItem("MdLocal"),
    catalogList: [],
    theme: "",
    id: "my-editor", //必须把目录和在线文本绑定在一起
  });
  
  //不知道有什么用
  const scrollElement = document.documentElement;
  
  
  </script>
  
  <style scoped>
  .box {
  
    width: 100vw;
    display: flex;
  }
  .MdCatalog {
    width: 100%;
    margin-right: 5px;
    height: 100vh;
    user-select: none; /* 不允许选择文本 */
    padding: 10px;
    z-index: 10; /* 确保它覆盖其他内容 */
    overflow-y: auto; /* 超出内容时显示垂直滚动条 */
    color: rgb(67, 61, 54); /*字体颜色 */
    border: 1px solid rgba(159, 241, 136, 0.5);
  }
  .Mdpreview {
    margin-right: 10px;
  }
  </style>